<template>
  <div class="chartContainer" id="basic_view" ref="containView"></div>
</template>

<script>
export default {
  props: ["options"],

  data() {
    return {
      global_chart: "",

      inited: false
    };
  },
 
  mounted() {

    

    
  },

  methods: {
    loadChart() {

      if(!this.inited){
        let that = this;
        this.global_chart = this.$echarts.init(
        document.getElementById("basic_view"));
        this.inited = true;
    
        window.addEventListener("resize", function() {
          that.global_chart.resize();
        });
     
      }

      if (this.options) { 
        this.global_chart.clear();
        this.global_chart.resize();
        let option = eval('(' +this.options + ')');
         
        this.global_chart.setOption(option);
      }
    }
  },

  watch: {
    options(nv, ov) {
      this.loadChart();
    }
  }
};
</script>

<style scoped>
.chartContainer {
  width: 100%;
  height: 100%;
}
</style>
